import 'package:flutter/material.dart';
import '../router/router.dart';

/// 标签页导航组件
class SideTopTabBar extends StatelessWidget {
  /// 当前页面路由名称
  final String currentPage;
  
  /// 打开的标签页列表
  final List<String> openTabs;
  
  /// 标签页切换回调
  final Function(String) onTabChanged;
  
  /// 标签页关闭回调
  final Function(int) onTabClosed;
  
  /// 是否可以返回
  final bool canGoBack;
  
  /// 是否可以前进
  final bool canGoForward;
  
  /// 返回按钮点击回调
  final VoidCallback onBackPressed;
  
  /// 前进按钮点击回调
  final VoidCallback onForwardPressed;
  
  /// 刷新按钮点击回调
  final VoidCallback onRefreshPressed;

  const SideTopTabBar({
    super.key,
    required this.currentPage,
    required this.openTabs,
    required this.onTabChanged,
    required this.onTabClosed,
    required this.canGoBack,
    required this.canGoForward,
    required this.onBackPressed,
    required this.onForwardPressed,
    required this.onRefreshPressed,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(color: Colors.grey.shade200),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 1,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Row(
        children: [
          // 前进后退按钮
          IconButton(
            icon: const Icon(Icons.arrow_back, size: 18),
            onPressed: canGoBack ? onBackPressed : null,
            color: canGoBack ? Colors.black : Colors.grey.shade400,
            tooltip: '返回',
          ),
          IconButton(
            icon: const Icon(Icons.arrow_forward, size: 18),
            onPressed: canGoForward ? onForwardPressed : null,
            color: canGoForward ? Colors.black : Colors.grey.shade400,
            tooltip: '前进',
          ),
          
          // 标签页
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: openTabs.length,
              itemBuilder: (context, index) {
                final routeName = openTabs[index];
                final routeConfig = AppRouter().getRouteConfig(routeName);
                final title = routeConfig?.title ?? 'Unknown';
                final icon = routeConfig?.icon ?? Icons.web;
                final isActive = currentPage == routeName;
                
                return Container(
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: isActive ? Colors.blue : Colors.transparent,
                        width: 2,
                      ),
                    ),
                  ),
                  child: InkWell(
                    onTap: () => onTabChanged(routeName),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                      child: Row(
                        children: [
                          Icon(icon, size: 16, color: isActive ? Colors.blue : Colors.grey),
                          const SizedBox(width: 8),
                          Text(
                            title,
                            style: TextStyle(
                              color: isActive ? Colors.blue : Colors.grey.shade700,
                              fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                            ),
                          ),
                          const SizedBox(width: 8),
                          if (openTabs.length > 1)
                            InkWell(
                              onTap: () => onTabClosed(index),
                              child: const Icon(Icons.close, size: 14, color: Colors.grey),
                            ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          
          // 刷新按钮
          IconButton(
            icon: const Icon(Icons.refresh, size: 18),
            onPressed: onRefreshPressed,
            tooltip: '刷新',
          ),
        ],
      ),
    );
  }
} 